
<div class="layui-fluid" id="VIEW-list-table" lig-title="res-title" lay-title="权限">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-row layui-col-space30">
                <div class="layui-col-md2" style="border-right: 1px solid #e2e2e2;">
                    <div lay-filter="lig-tree-res"></div>
                </div>
                <div class="layui-col-md10">
                    <div class="layui-btn-container nepadmin-pad-t10 nepadmin-pad-l10">
                        <form lay-filter="lig-searchForm">
                            <input type="hidden" name="appId"/>
                            <input type="hidden" name="parentId" value="root"/>
                        </form>
                        <div class="layui-btn layui-btn-sm lig-add" lay-filter="lig-add-res" lig-lang="btn-addFirstRes">添加一级菜单</div>
                    </div>
                    <table class="layui-table layui-form" lay-filter="lig-table-res"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="tpl-modify-res">
    <form class="layui-form" lay-filter="lig-saveForm" style="padding: 20px 20px 0 0;">
        <input type="hidden" name="resId" value="{{d.resId}}"/>
        <div class="layui-form-item">
            <label class="layui-form-label ligui-form-item-required" lig-lang="res-resName">名称</label>
            <div class="layui-input-block">
                <input type="text" name="resName" lay-verify="required" autocomplete="off" class="layui-input"
                       value="{{d.resName}}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ligui-form-item-required" lig-lang="res-resCode">编码</label>
            <div class="layui-input-block">
                <input type="text" name="resCode" autocomplete="off" class="layui-input layui-disabled" disabled
                       value='{{d.resCode}}'>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ligui-form-item-required" lig-lang="res-resType">类型</label>
            <div class="layui-input-block">
                <select name="resType" lay-verify="required">
                    <option value=""></option>
                    <option value="DIR" lig-lang="res-dir">目录</option>
                    <option value="MENU" lig-lang="res-menu">菜单</option>
                    <option value="ACTION" lig-lang="res-action">操作按钮</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">URL</label>
            <div class="layui-input-block">
                <input type="text" name="url" autocomplete="off"
                       class="layui-input" value="{{d.url}}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" lig-lang="res-serial">排列序号</label>
            <div class="layui-input-block">
                <input type="text" name="serial" autocomplete="off"
                       class="layui-input" value="{{d.serial}}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" lig="res-descr">描述</label>
            <div class="layui-input-block">
                <input type="text" name="descr" autocomplete="off"
                       class="layui-input" value="{{d.descr}}">
            </div>
        </div>
    </form>
</script>
<script type="text/html" id="tpl-add-res">
    <form class="layui-form" lay-filter="lig-saveForm" style="padding: 20px 20px 0 0;">
        <input type="hidden" name="parentId"/>
        <input type="hidden" name="appId"/>
        <div class="layui-form-item">
            <label class="layui-form-label ligui-form-item-required" lig-lang="res-resName">名称</label>
            <div class="layui-input-block">
                <input type="text" name="resName" lay-verify="required" autocomplete="off" class="layui-input"
                       value=''>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ligui-form-item-required" lig-lang="res-resCode">编码</label>
            <div class="layui-input-block">
                <input type="text" name="resCode" lay-verify="required" autocomplete="off" class="layui-input"
                       value=''>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label ligui-form-item-required" lig-lang="res-resType">类型</label>
            <div class="layui-input-block">
                <select name="resType" lay-verify="required">
                    <option value="DIR" lig-lang="res-dir">目录</option>
                    <option value="MENU" lig-lang="res-menu">菜单</option>
                    <option value="ACTION" lig-lang="res-action">操作按钮</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">URL</label>
            <div class="layui-input-block">
                <input type="text" name="url" autocomplete="off"
                       class="layui-input" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" lig-lang="res-serial">排列序号</label>
            <div class="layui-input-block">
                <input type="text" name="serial" autocomplete="off"
                       class="layui-input" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" lig-lang="res-descr">描述</label>
            <div class="layui-input-block">
                <input type="text" name="descr" autocomplete="off"
                       class="layui-input" value="">
            </div>
        </div>
    </form>
</script>

<script>
    layui.use(['jquery', 'form', 'laytpl', 'eleTree', 'treeTable', 'admin', 'lig'], function ($, form, laytpl, eleTree, treeTable, admin, lig) {
        var _searchForm = $('[lay-filter="lig-searchForm"]');

        form.render();

        showData();

        lig.ajaxget({
            url: 'ac/app/tree',
            success: function (res) {

                if (res.data) {
                    var _tree = eleTree.render({
                        elem: '[lay-filter="lig-tree-res"]',
                        highlightCurrent: true,
                        showLine: true,
                        expandOnClickNode: false,
                        showLine:true,
                        data: res.data,
                        request: {
                            name: "title"
                        }
                    });
                    // 节点点击事件
                    eleTree.on("nodeClick(lig-tree-res)",function(d) {
                        var _selectedId = d.data.currentData.id;
                        _searchForm.find('input[name="appId"]').val(_selectedId);
                        requestData();
                    });

                    var _appId = res.data[0].id;
                    _tree.setHighlightNode(_appId);
                    _searchForm.find('input[name="appId"]').val(_appId);
                    requestData();
                }
            }
        });

        $('[lay-filter="lig-add-res"]').click(function () {
            dialogSaveFormRes({title: '<span lig-lang="res-addFirstRes">添加一级菜单</span>', parentId:'root'});
        });

        function requestData() {
            var _appId = _searchForm.find('input[name="appId"]').val();
            lig.ajaxget({
                url: 'ac/res/tree/list/' + _appId,
                success: function (res) {
                    showData(res.data);
                }
            });
        }

        function showData(data) {
            treeTable.render({
                elem: '[lay-filter="lig-table-res"]',
                data: data,
                icon_key: 'title',
                end: function(e){
                    if (admin.sessionData()['lang-label']) {
                        var label = admin.sessionData()['lang-label'];
                        $('[lay-filter="lig-table-res"]').find('[lig-lang]').each(function () {
                            var value = $(this).attr('lig-lang');
                            $(this).text(label[value])
                        });
                    }
                    form.render();
                },
                cols: [
                    {
                        key: 'title',
                        title: '<span lig-lang="res-resName">名称</span>',
                        width: '140px',
                        template: function(item){
                            if(item.level == 0){
                                return '<span style="color:red;">'+item.title+'</span>';
                            }else if(item.level == 1){
                                return '<span style="color:green;">'+item.title+'</span>';
                            }else if(item.level == 2){
                                return '<span style="color:#aaa;">'+item.title+'</span>';
                            }
                        }
                    },
                    {
                        key: 'url',
                        title: 'URL',
                        width: '160px',
                        align: 'left',
                    },
                    {
                        key: 'resCode',
                        title: '<span lig-lang="res-resCode">编码</span>',
                        width: '80px',
                        align: 'left',
                    },
                    {
                        key: 'serial',
                        title: '<span lig-lang="res-serial">排列序号</span>',
                        width: '60px',
                        align: 'center',
                    },
                    {
                        title: '<span lig-lang="label-opt">操作</span>',
                        align: 'center',
                        template: function(item){
                            return '<a lay-filter="lig-add-res-child" lig-lang="btn-addChildRes">添加子项</a> | <a lay-filter="lig-modify-res" lig-lang="btn-modify">修改</a> | <a lay-filter="lig-remove-res" lig-lang="btn-delete">删除</a>';
                        }
                    }
                ]
            });
            treeTable.on('tree(lig-add-res-child)',function(data){
                var _parentId = data.item.id;
                dialogSaveFormRes({title: '<span lig-lang="res-addChildRes">添加子项</span>', parentId:_parentId});
            });
            treeTable.on('tree(lig-modify-res)',function(data){
                lig.ajaxget({
                    url: 'ac/res/' + data.item.id,
                    success: function (result) {
                        laytpl($('#tpl-modify-res').html()).render(result.data, function (html) {
                            lig.dialog({
                                content: html,
                                title: '<span lig-lang="res-modifyRes">修改资源</span>',
                                area: ['50%', 'auto'],
                                saveUrl: 'ac/res/modify',
                                onOpened: function () {
                                    form.val("lig-saveForm", { //formTest表单的 lay-filter="" 对应的值
                                        "resType": result.data.resType   // "name": "value"
                                    });
                                },
                                onCompleted: function () {
                                    requestData();
                                }
                            });
                        });
                    }
                })
            });
            treeTable.on('tree(lig-remove-res)',function(data){
                lig.remove({
                    url: 'ac/res/remove',
                    data: {ids: data.item.id},
                    completed: function () {
                        requestData();
                    }
                });
            });
        }

        function dialogSaveFormRes(options) {
            lig.dialog({
                content: $('#tpl-add-res').html(),
                title: options.title,
                area: ['50%', 'auto'],
                saveUrl: 'ac/res/add',
                onOpened: function () {
                    var _saveForm = $('[lay-filter="lig-saveForm"]');
                    _saveForm.find('input[name="parentId"]').val(options.parentId);
                    _saveForm.find('input[name="appId"]').val(_searchForm.find('input[name="appId"]').val());
                },
                onCompleted: function (result) {
                    requestData();
                }
            });
        }
    });
</script>